.FullScreenModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--center-channel-bg);
    z-index: 1030 !important;
    overflow: auto;

    .close-x, .back {
        border: 0;
        background: none;
        padding: 0;
        position: fixed;
        top: 48px;
        height: 40px;
        width: 40px;
        cursor: pointer;
        z-index: 9;

        svg {
            fill: var(--center-channel-color-56);
            padding: 4px;
            width: 40px;
            height: 40px;
            border-radius: 4px;

            &:hover {
                fill: var(--center-channel-color-72);
                background: var(--center-channel-color-08);
            }

            &:active {
                fill: var(--button-bg);
                background: var(--button-bg-08);
            }
        }
    }

    .close-x {
        right: 48px;
    }

    .back {
        left: 48px;
    }

    // Animation
    &-enter, &-appear {
        opacity: 0;
    }
    &-enter-active, &-appear-active {
        opacity: 1;
        transition: opacity 100ms;
    }
    &-exit {
        opacity: 1;
    }
    &-exit-active {
        opacity: 0;
        transition: opacity 100ms;
    }
}

.FullScreenModal.FullScreenModal--compact {
    .back {
        top: 8px;
        left: 16px;
    }

    .close-x {
        top: 8px;
        right: 16px;
    }

    .close-x, .back {
        position: absolute;
    }
}
